---
title: Chakra UI Hackathon 22’ Recap
description:
  Last month we had the first-ever Chakra UI Hackathon, which we tagged the
  Chakrathon 22'. The Hackathon was held from May 3rd to May 20th, 2022, with
  participants from various parts of the world involved.
author: estheragbaje
publishedDate: 06/23/2022
---

Last month we had the first-ever Chakra UI Hackathon, which we tagged the
Chakrathon 22'. The Hackathon was held from May 3rd to May 20th, 2022, with
participants from various parts of the world involved. Folks, the entire
experience was fantastic and is definitely one for the books!

<Image
  alt='Chakra UI hackathon 22'
  src='/hackathon/about-hackathon.png'
  height='320px'
/>

Come along, let's take you on a journey on how the Chakrathon 22' went down.

## Planning is key to a successful Hackathon

As a team, we had spoken a few times about hosting a Hackathon for the
community. But, we weren't sure if the community was also interested in this, so
we needed to find out. What did we do? First, we created a poll on Twitter to
gauge the community's excitement about a Chakra UI Hackathon. The results of
this poll would inform if the timing of the Hackathon was right and, ultimately,
if the Chakra community would be interested.

<LinkedImage
  href='https://twitter.com/chakra_ui/status/1509517455307251723?s=20&t=YPsD2-9eo6t2TUvI1oN8kA'
  height={200}
  alt='Hackathon poll feedback'
  src='/hackathon/poll-feedback.png'
/>

The feedback received from this poll showed that 92% of 79 voters were excited
about the Hackathon! Receiving this incredible stat was only the first step and
by far the easiest one. We also had to clarify the goal of this Hackathon and
weave each part of the planning into this goal.

### **The goal of the Hackathon**

The goal of the Hackathon was to drive community engagement and foster
collaboration between designers and developers in the ecosystem. We were looking
for teams to design and develop the next best component in Chakra UI.

While pulling this off seemed straightforward, in terms of experience, we also
wanted the Hackathon to be a fun and memorable experience for all.

As a result, we put forward an exciting challenge for the Hackathon. In
addition, we outlined some core facets such as timeline, judging criteria,
sponsors, etc.

### **Key elements of the Hackathon**

With so many different parts of a Hackathon to plan, after much thought, we came
up with the following:

- **Challenge:** Teams were asked to create a custom single select component for
  Chakra UI. The native Select component is quite hard to style, so we wanted to
  create a custom version.
- **Timeline:** We wanted teams to have enough (but not excess) time to solve
  this challenge. Hence, the Hackathon spanned 2.5 weeks, split into different
  rounds. View the whole timeline
  [here](https://hackathon.chakra-ui.com/#timeline).
- **Rounds:** There were two rounds in the Hackathon. The first was the
  'Elimination round,' where we asked teams to submit their components' API
  considerations and UI designs. Only the first few teams would advance to the
  next round. The 'Final round' was where teams went through the entire process
  of building the components they had previously designed.
- **Judging Criteria:** For a free and fair Hackathon, we had to develop the
  criteria to score teams. These included:
  - Accessibility considerations
  - Component hook and API design
  - Ease of customization with style props
  - Theming and variants
  - Proper documentation
  - Component UI design
- **Judges:** In addition to
  [Segun Adebayo](https://twitter.com/thesegunadebayo), the creator of Chakra
  UI, we decided to bring on two judges outside the Core team for an unbiased
  scoring and review of submissions. They were
  [Eelco Wiersma](https://twitter.com/pagebakers) of Saas UI and
  [Simon Hoiberg](https://twitter.com/SimonHoiberg) of Feedhive. We're so
  thankful to them for obliging our invite.
- **Rules:** Since the Hackathon's goal was to encourage collaboration, a
  fundamental rule, among others, each team was to consist of at least two
  members. View other hackathon rules
  [here](https://hackathon.chakra-ui.com/#rules).
- **Theme:** Remember we mentioned earlier that this Hackathon was a memorable
  event? What better way to do this than by adding some extra fun. We decided to
  have a theme for our Hackathon, and picking the theme was a no-brainer. You
  probably guessed it! As anime lovers, we came up with an Anime theme. This
  meant that every team would pick their favorite Anime as their team name. For
  example, teams would be named Team Naruto, Team Sasuke, etc.
- **Sponsors:** One specific element of a successful event is the sponsors.
  While planning, it was evident we would need sponsors for the event. We're so
  grateful to those who decided to partner with us and support this Hackathon.
  Thank you to [RedwoodJS](https://redwoodjs.com/) and
  [Chakra UI Pro](https://pro.chakra-ui.com/).
- **Prizes:** Based on the funding received from the sponsorship, these were the
  prizes:
  - 1st place: $2000
  - 2nd place: $1000
  - 3rd place: $750 \*_All in USD_

## Organizing a delightful experience

After weeks of planning, it was time to implement our plans and carry out the
Hackathon.

### **Pre-Hackathon process**

Before launching the Hackathon, we had to put a couple of things in place. Some
of them include:

- **Build the Hackathon website:** Since this was an online event, we created a
  website to show information to participants and be a timeline guide throughout
  the Hackathon. Check the site [here](https://hackathon.chakra-ui.com/).
- **Announce to the community:** Remember, during the planning phase, we reached
  out to the community using a Twitter poll? Now, it was time to let them know
  about the Hackathon and how to prepare for it. We announced on our
  [Twitter](https://twitter.com/chakra_ui) page and
  [Discord server](https://chakra-ui.com/discord) to drive awareness about the
  Hackathon and when team registration will open.
- **Open up Registration:** Registration was open from May 3rd to May 5th, and
  upon successful registration, we sent emails to every team for confirmation.
  In no small way, we used this to build excitement and anticipation among
  registered teams. A total of 29 teams registered to be a part of the
  Chakrathon 22'.

<Image alt='Hackathon team' src='/hackathon/team1.png' />
<Image alt='Hackathon team' src='/hackathon/team2.png' />
<Image alt='Hackathon team' src='/hackathon/team3.png' />
<Image alt='Hackathon team' src='/hackathon/team4.png' />

- **Set up the Chakrathon Discord channel:** Upon registration, teams were
  directed to join the #chakrathon channel on our
  [Discord server](https://discord.com/invite/chakra-ui) from May 6th. This was
  where we would have all communication and pass information about the
  Hackathon.

### Hackathon process

- **Welcome teams:** We created a video to welcome teams, give a run down of the
  activities in the Hackathon, and set an expectation for each participant.

<LinkedImage
  href='https://youtu.be/JuIBuy3qd_U'
  height={400}
  alt='Hackathon Welcome video'
  src='/hackathon/welcome-video.png'
/>

- **Discord Channel:** Since all communication was held on the #chakrathon
  channel, we had to be actively present to answer questions and support teams
  throughout the different rounds of the Hackathon.
- **Feedback:** For us, learning was a crucial part of the Hackathon. As such,
  based on the score and feedback from the judges, we sent every team feedback
  on concepts they could improve upon at the end of every round.
- **Hackathon hangout with the Chakra UI team:** After nearly two weeks of
  intense work from each group, the Hackathon finally ended on May 19th. To wrap
  up, we had an online community event to catch up with the participants, engage
  with them, and answer questions about Chakra UI. This was one of the most
  unforgettable activities in the hackathon, both for us as the Chakra UI team
  and participants.

  <Image alt='Hackathon group photo' src='/hackathon/hackathon-group.png' />

- **Announcing the winners:** With submissions in and teams anxious, the judges
  had to get to work to review every submission. We announced the winners on May
  20th.

  - First place: Team Dragon
  - Second place: Team Genki
  - Third Place: Team Saitama

  <Image alt='Hackathon winners' src='/hackathon/hackathon-winners.png' />

## Feedback, our secret weapon for improvement

We've only just started, as the end of this hackathon is the beginning of many
more to come.

At the end of the Hackathon, we sent a form to participants to get feedback.
Some notable reviews we got include:

> I just loved the way everyone from around the world came together and
> collaborated on Discord. I did not have a team but thanks to the community I
> collaborated with 2 folks from Spain and made a few connections. It was an
> amazing experience.

> It was really tasking. It made me put my thinking hat on. It was also a great
> opportunity to learn how to collaborate.

> I loved the collaboration and efforts with the team that I have managed to
> create.

While we received 100% satisfaction, a few things were suggested that we could
improve upon:

- Start the Hackathon during a weekend to accommodate those who work actively or
  have kids
- Host a physical Hackathon

## Wrapping up

We're thankful to everyone who contributed and participated in making this
hackathon a success. From our team members to judges, sponsors, and of course,
team members.

Special thanks to our DevRel folks, [Lazar](https://twitter.com/NikolovLazar)
and [Esther](https://twitter.com/_estheragbaje), for spearheading this
Hackathon…from ideation to execution, every part was a hit!

We can't wait for the next Hackathon! Till then, keep calm and use Chakra UI.
